<template>
  <div class="container">
    <van-nav-bar
      title="健康计划"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div class="ball">
      <div class="head">
        <div class="head-left" @click="cultivation">
          <div class="head-text">8天健康养成计划</div>
          <div class="head-shu">8天健康养成计划，助你活力满满</div>
          <div class="head-btn">
            <div class="head-ren">9393人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="Skincare">
          <div class="head-text">15天护肤计划</div>
          <div class="head-shu">想拥有透白亮的肌肤，你得这样做。</div>
          <div class="head-btn">
            <div class="head-ren">149028人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女2.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="Medic">
          <div class="head-text">欧茜医生0~1岁育儿方案</div>
          <div class="head-shu">亲亲我的宝贝，这世上你最美！</div>
          <div class="head-btn">
            <div class="head-ren">71777人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女3.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="pimple">
          <div class="head-text">21天战痘计划</div>
          <div class="head-shu">再不消灭不了痘痘，脸就不能要了！</div>
          <div class="head-btn">
            <div class="head-ren">209942人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女4.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="Sleep">
          <div class="head-text">睡眠改善计划</div>
          <div class="head-shu">睡不着？一定是生活姿势不对</div>
          <div class="head-btn">
            <div class="head-ren">204905人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女5.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="Health" >
          <div class="head-text">30天上班族保健计划</div>
          <div class="head-shu">上班的时候要多搞小动作</div>
          <div class="head-btn">
            <div class="head-ren">111037人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女6.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="Leg">
          <div class="head-text">8天健康养成计划</div>
          <div class="head-shu">别人是火腿肠，你却是火腿？</div>
          <div class="head-btn">
            <div class="head-ren">280857人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女7.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left"  @click="Waist">
          <div class="head-text">21天瘦腿计划</div>
          <div class="head-shu">请叫我腹部绞肉机！</div>
          <div class="head-btn">
            <div class="head-ren">234470人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女8.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="homestead">
          <div class="head-text">7天宅家运动计划</div>
          <div class="head-shu">宅家不出门，一起运动起来吧，别掉队~</div>
          <div class="head-btn">
            <div class="head-ren">224386人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女9.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="Lose">
          <div class="head-text">30天减肥饮食计划</div>
          <div class="head-shu">连吃都不会，还想减肥？</div>
          <div class="head-btn">
            <div class="head-ren">273230人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女10.png" alt="" />
        </div>
      </div>

      <div class="head">
        <div class="head-left" @click="weight">
          <div class="head-text">30天减肥运动计划</div>
          <div class="head-shu">丑不一定胖，但是胖一定懒！</div>
          <div class="head-btn">
            <div class="head-ren">434187人已加入</div>
            <div class="head-jia">免费加入</div>
          </div>
        </div>
        <div class="head-right">
          <img src="../../assets/img/美女11.png" alt="" />
        </div>
      </div>

      <div class="fat">没有更多的了</div>
    </div>
  </div>
</template>
  
  <script setup lang='ts'>
const onClickLeft = () => history.back()

import { useRouter } from 'vue-router'

const router = useRouter()

// 8天健康养成计划
const cultivation= ()=>{
  router.push('/Cultivation')
}


// 15天护肤计划
const Skincare= ()=>{
  router.push('/Skincare')
}

// 欧茜医生
const Medic= ()=>{
  router.push('/Medic')
}

// 21天战痘计划
const pimple= ()=>{
  router.push('/Pimple')
}


// 睡眠改善计划
const Sleep= ()=>{
  router.push('/Sleep')
}


// 30天上班族保健计划
const Health= ()=>{
  router.push('/Health')
}


// 21天瘦腿计划
const Leg= ()=>{
  router.push('/Leg')
}


// 21天瘦腰计划

const Waist= ()=>{
  router.push('/Waist')
}


// 7天宅家运动计划

const homestead= ()=>{
  router.push('/Homestead')
}


// 30天减肥饮食计划
const Lose= ()=>{
  router.push('/Lose')
}



// 30天减肥运动计划
const weight= ()=>{
  router.push('/Weight')
}


</script>

<style lang='scss'>
.container {
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
}

.ball {
  height: 100%;
  width: 100%;
  // background-color: #d2f108;
  padding: 10px;

  .head {
    height: 110px;
    width: 100%;
    background-color: #717780;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    .head-left {
      float: left;
      .head-text {
        padding: 10px;
        font-size: 20px;
        font-weight: bold;
      }
      .head-shu {
        font-size: 13px;
        padding-left: 10px;
      }
      .head-btn {
        padding: 10px;
        .head-ren {
          float: left;
          font-size: 12px;
        }
        .head-jia {
          float: left;
          height: 22px;
          width: 70px;
          background-color: #39d167;
          font-size: 12px;
          text-align: center;
          line-height: 22px;
          border-radius: 20px;
          margin-left: 20px;
          font-weight: bold;
        }
      }
    }
    .head-right {
      float: right;
      img {
        height: 100px;
        width: 90px;
        margin-right: 10px;
        margin-top: 10px;
      }
    }
  }

  .fat {
    width: 100%;
    text-align: center;
    color: #9e9fa0;
  }
}
</style>